<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select组件</title>
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript" src="select.js"></script>
<link rel="stylesheet" href="zTreeStyle.css" /> 
<script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="jquery.ztree.excheck-3.5.js"></script>
</head>
<body>
	  <div style="height:40px;line-height:25px;background:#F0AD4E;max-width:250px;float:left;">
		 <div style="height:40px;line-height:40px;float:left;max-width:220px;">
		 	<div style="margin-left:5px;height:40px;line-height:40px;max-width:210px;word-break: break-all;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
		 </div>
		 <div style="height:40px;line-height:40px;float:left;background:#D6E9C6;width:30px;text-align: center;">
		 	<svg version="1.1" style="margin-top:8px;cursor: pointer;" fill="green" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> <g> 	<path d="M17.586,46.414C17.977,46.805,18.488,47,19,47s1.023-0.195,1.414-0.586L32,34.828l11.586,11.586 		C43.977,46.805,44.488,47,45,47s1.023-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L34.828,32l11.586-11.586 		c0.781-0.781,0.781-2.047,0-2.828c-0.781-0.781-2.047-0.781-2.828,0L32,29.172L20.414,17.586c-0.781-0.781-2.047-0.781-2.828,0 		c-0.781,0.781-0.781,2.047,0,2.828L29.172,32L17.586,43.586C16.805,44.367,16.805,45.633,17.586,46.414z"></path> 	<path d="M32,64c8.547,0,16.583-3.329,22.626-9.373C60.671,48.583,64,40.547,64,32s-3.329-16.583-9.374-22.626 		C48.583,3.329,40.547,0,32,0S15.417,3.329,9.374,9.373C3.329,15.417,0,23.453,0,32s3.329,16.583,9.374,22.626 		C15.417,60.671,23.453,64,32,64z M12.202,12.202C17.49,6.913,24.521,4,32,4s14.51,2.913,19.798,8.202C57.087,17.49,60,24.521,60,32 		s-2.913,14.51-8.202,19.798C46.51,57.087,39.479,60,32,60s-14.51-2.913-19.798-8.202C6.913,46.51,4,39.479,4,32 		S6.913,17.49,12.202,12.202z"></path> </g> </svg>
		 </div>
	 </div>
	 <div style="height:40px;line-height:25px;background:#F0AD4E;max-width:250px;float:left;"> 
	 				 
	  <ul id="treeDemo" class="ztree"></ul>
	 </div>
	 
	 <div style="height:40px;line-height:25px;background:#F0AD4E;max-width:250px;float:left;"> 
	 				<input type="button" id="bt1" value="getValues">
	 				<input type="button" id="bt2"  value="setValues"> 
	 
	 </div>
	 
	
	<div style="margin-top:100px;margin-left:300px;position: absolute;" tabindex="">
			<input type="text" id="testInput">
			<input type="text" id="testInput3">
	</div>
	
	 
	
	
	<div style="margin-top:100px;margin-left:600px;position: absolute;" tabindex="">
			<input type="text" id="testInput1">
			<input type="text" id="testInput2">
	</div>
	<div style="margin-top:800px;margin-left:900px;position: absolute;" tabindex="">
			 
	</div>
	
	
	 
	
</body>
<script type="text/javascript">
	 
    var opts1 =	$("#testInput").houzhuoSelect({
					selectId:'testInput',
				    width:300,
					height:300,
					single:true,
					tree:true,
					treesetting:{
							   data:{
								      key:{
								         name: 'text'
								      },
								      simpleData:{
								         enable: true,
								         idKey: "id",
								         pIdKey: "pId",
								         rootPId: null
								      }
								   },
								   check: {
								      enable: true,
								      autoCheckTrigger: true,
								      radioType: "all",
								      chkStyle: "checkbox"
								   },
								   callback: {
									   onClick:function(event, treeId, treeNode){
										   alert(treeId);
									   }
								   }
							},
					idFiled:"table_id",
				 	nameFiled:"content",
				 	panelpostion:"down",
				 	showFiled:{
				 		filed:["table_id","content","name"],
				 		filedTitle:["主键Id","内容","名称"]
				 	},
				 	dataUrl:"${pageContext.request.contextPath}/demo.do",
					page:true,
					valueData:[],
					param:{
						start:1,
						limit:20,
						count:0,
					},
				 	before:function(opts){
						console.log(opts.valueData);
					},
					success:function(opts) {
						console.log(opts.valueData);
					},submit:function(opts){
						console.log($("#testInput").data("data"));
						
					}
			});
    
    var opts1 =	$("#testInput3").houzhuoSelect({
		selectId:'testInput3',
	    width:300,
		height:300,
		single:true,
		tree:true,
		treesetting:{ 
				},
		idFiled:"table_id",
	 	nameFiled:"content",
	 	panelpostion:"down",
	 	showFiled:{
	 		filed:["table_id","content","name"],
	 		filedTitle:["主键Id","内容","名称"]
	 	},
	 	dataUrl:"${pageContext.request.contextPath}/demo.do",
		page:true,
		valueData:[],
		param:{
			start:1,
			limit:20,
			count:0,
		},
	 	before:function(opts){
			console.log(opts.valueData);
		},
		success:function(opts) {
			console.log(opts.valueData);
		},submit:function(opts){
			console.log($("#testInput").data("data"));
			
		}
	});

	$("#bt1").click(function(){ 
		var array = $("#testInput").houzhuoSelect("getValues","testInput");
		console.log(array); 
	}); 
	$("#bt2").click(function(){ 
		var array = [{table_id:"1",content:"夺地",name:"张三aaaa"}];
		var array = $("#testInput2").houzhuoSelect("setValues",array);
		console.log(array); 
	}); 
	
	var opts2 =$("#testInput1").houzhuoSelect({
		selectId:'testInput1',
	    width:600,
		height:300,
		single:false,
		tree:false,
		treesetting:{},
		idFiled:"table_id",
	 	nameFiled:"content",
	 	showFiled:{
	 		filed:["table_id","content","name"],
	 		filedTitle:["主键Id","内容","名称"]
	 	},
	 	dataUrl:"${pageContext.request.contextPath}/demo.do",
		page:true,
		valueData:[{table_id:"7",content:"我爱你",name:"张三"},{table_id:"8",content:"我爱你",name:"张三"}],
		param:{
			start:1,
			limit:20,
			count:0,
		},submit:function(opts){
			console.log($("#testInput1").data("data"));
			
		}
	});
	var opts3 =$("#testInput2").houzhuoSelect({
		selectId:'testInput2',
	    width:600,
		height:300,
		single:false,
		tree:false,
		treesetting:{},
		idFiled:"table_id",
	 	nameFiled:"content",
	 	showFiled:{
	 		filed:["table_id","content","name"],
	 		filedTitle:["主键Id","内容","名称"]
	 	},
	 	dataUrl:"${pageContext.request.contextPath}/demo.do",
		page:true,
		valueData:[{table_id:"7",content:"我爱你",name:"张三"},{table_id:"8",content:"我爱你",name:"张三"}],
		param:{
			start:1,
			limit:20,
			count:0,
		}
	});
	

</script>
<SCRIPT type="text/javascript"> 
		 
</SCRIPT>
</html>